<html>

<head>
    <meta charset="utf-8" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
    如何白嫖（搭建）一个静态博客 | 面包and牛奶的小窝
</title>
<link rel="shortcut icon" href="https://mianbao-niunai.gitee.io/mianbao-niunai/favicon.ico?v=1661438432526">
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
<link rel="stylesheet" href="https://mianbao-niunai.gitee.io/mianbao-niunai/styles/main.css">
<!-- js -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://mianbao-niunai.gitee.io/mianbao-niunai/media/js/jquery.sticky-sidebar.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.23.0/moment.min.js"></script>


        
</head>

<body>
    <div class="main">
        <div class="header">
    <div class="nav">
        <div class="logo">
            <a href="https://mianbao-niunai.gitee.io/mianbao-niunai">
                <img class="avatar" src="https://mianbao-niunai.gitee.io/mianbao-niunai/images/avatar.png?v=1661438432526" alt="">
            </a>
            <div class="site-title">
                <h1>
                    面包and牛奶的小窝
                </h1>
            </div>
        </div>
        <span class="menu-btn fa fa-align-justify"></span>
        <div class="menu-container">
            <ul>
                
                    
                            <li>
                                <a href="/" class="menu">
                                    首页
                                </a>
                            </li>
                            
                                
                    
                            <li>
                                <a href="/archives" class="menu">
                                    归档
                                </a>
                            </li>
                            
                                
                    
                            <li>
                                <a href="/tags" class="menu">
                                    标签
                                </a>
                            </li>
                            
                                
            </ul>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $(".menu-btn").click(function() {
            $(".menu-container").slideToggle();
        });
        $(window).resize(function() {

            if (window.matchMedia('(min-width: 960px)').matches) {
                $(".menu-container").css('display', 'block')
            } else {
                $(".menu-container").css('display', 'none')
            }

        });
    });
</script>

            <div id="main-content" class="post-detail main-container">
                <!-- left -->
                <div id="content" class="main-container-left">
                    <article class="post i-card">
                        <h2 class="post-title">
                            如何白嫖（搭建）一个静态博客
                        </h2>
                        <div class="post-info">
                            <time class="post-time">2022-06-29</time>
                            
                                <a href="https://mianbao-niunai.gitee.io/mianbao-niunai/xin-xi-za-tan/" class="post-tag i-tag
                            i-tag-primary">
                            #信息杂谈
                        </a>
                                
                                <a href="https://mianbao-niunai.gitee.io/mianbao-niunai/an-quan-gui-hua/" class="post-tag i-tag
                            i-tag-">
                            #安全规划
                        </a>
                                
                        </div>
                        
                            <div class="post-feature-image" style="background-image: url('https://mianbao-niunai.gitee.io/mianbao-niunai/post-images/ru-he-bai-piao-da-jian-yi-ge-jing-tai-bo-ke.png')"></div>
                            
                                <div class="post-content">
                                    <h3 id="前言">前言</h3>
<p>今天我们来介绍如何搭建自己的静态博客吧！首先，因为我们是静态博客，所以不需要太复杂的技术，前端做好后，挂在一个可以共享网站Pages服务的下面，即可！</p>
<h3 id="前期准备">前期准备</h3>
<p>下面更据上述情况我们选择Gitee/GitHub+Gridea进行简单的搭建！</p>
<p>我们来更据实用性对两个网站进行一个简要的分析：</p>
<table>
<thead>
<tr>
<th style="text-align:center"></th>
<th style="text-align:center">Gitee</th>
<th style="text-align:center">GitHub</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">注册</td>
<td style="text-align:center">需要自己的身份证（服了）开申请证明</td>
<td style="text-align:center">什么都不需要，一个GitHub账号全部搞定</td>
</tr>
<tr>
<td style="text-align:center">步骤</td>
<td style="text-align:center">都需要建立一个仓库，并且输入Token值</td>
<td style="text-align:center">都需要建立一个仓库，并且输入Token值</td>
</tr>
<tr>
<td style="text-align:center">维护</td>
<td style="text-align:center">繁琐（每次更新博客的时候都得重新启动Gitee Pages服务）</td>
<td style="text-align:center">简单（不用管理，自动进行）</td>
</tr>
<tr>
<td style="text-align:center">稳定</td>
<td style="text-align:center">由于是国内项目，没得说</td>
<td style="text-align:center">由于众所周知的愿意，更新出bug，连接失败是常态</td>
</tr>
</tbody>
</table>
<p>相信大家!看完这个表格都有一定的选择了，下面我们来搭建网站；首先注册Gitee/GitHub这两网站的账号，接着去下载Gridea！（附上<a href="https://gitee.com/fehey/gridea?_from=gitee_search">Gridea地址</a>）</p>
<h3 id="申请仓库">申请仓库</h3>
<p>安装好后，我们在Gitee/GitHub为自己创建一个以自己用户名为名字的仓库（当然也可以不这样，只不过这样你的博客会比前一种，在长度单位上长不少，关键是影响记忆效果，大家都喜欢短的域名）</p>
<p>接下来给仓库创建名称,设置模板，选择分支（这个看大家喜好）</p>
<figure data-type="image" tabindex="1"><img src="https://mianbao-niunai.gitee.io/mianbao-niunai/post-images/1656495135981.png" alt="" loading="lazy"></figure>
<figure data-type="image" tabindex="2"><img src="https://mianbao-niunai.gitee.io/mianbao-niunai/post-images/1656495146965.png" alt="" loading="lazy"></figure>
<p>小提示：Gitee默认无法公开，要想公开只能提交申请；GitHub默认public！</p>
<h3 id="申请token">申请Token</h3>
<p>接下来我们找到Gitee/GitHub的Token值就行了！这两个网站都差不多，点击设置，在列表中分别找到&quot;安全设置===&gt;私人令牌&quot;和&quot;Developer setting===&gt;Personal access tokens&quot;后，点击新建的按钮就行了！<br>
<img src="https://mianbao-niunai.gitee.io/mianbao-niunai/post-images/1656495160094.png" alt="" loading="lazy"></p>
<figure data-type="image" tabindex="3"><img src="https://mianbao-niunai.gitee.io/mianbao-niunai/post-images/1656495167341.png" alt="" loading="lazy"></figure>
<p>小提示：Gitee这次直接点击提交就可以了；GitHub点击repo就可以提交了！</p>
<h3 id="配置环境">配置环境</h3>
<p>最后一步，打开Gridea，</p>
<figure data-type="image" tabindex="4"><img src="https://mianbao-niunai.gitee.io/mianbao-niunai/post-images/1656495183269.png" alt="" loading="lazy"></figure>
<p>我们可以通过选择不同的主题，来改变页面的前端设计！这是非常方便的，这里我推荐他们家的主题商店！（附上<a href="https://gridea.dev/themes/">Gridea主题商店地址</a>，供大家选择安装）</p>
<figure data-type="image" tabindex="5"><img src="https://mianbao-niunai.gitee.io/mianbao-niunai/post-images/1656495195934.png" alt="" loading="lazy"></figure>
<p>最后，依次点击&quot;检测远程连接&quot;和&quot;同步&quot;就行了，然后就可以访问我们的博客了！</p>
<p>小提示：Gitee需要在每次更新后，点击Git page下面的更新按钮！<br>
<img src="https://mianbao-niunai.gitee.io/mianbao-niunai/post-images/1656495204500.png" alt="" loading="lazy"></p>
<h3 id="小结">小结</h3>
<p>这种bug分为两大类，一类是远程连接失败；另一类是远程同步失败（这一点GitHub前用户的我深有体会），如果是第一类好好检查一下自己的仓库/路劲名就可以了，实在不行换一下token值就解决了。如果是GitHub发生同步报错，不用担心，只是连接问题（尝试飞机）就行了！好了，今天的分享就到这里，谢谢大家观看！</p>

                                </div>
                    </article>
                    <!--  -->
                    
                        <div class="next-post">
                            <div class="next">下一篇</div>
                            <a href="https://mianbao-niunai.gitee.io/mianbao-niunai/ying-ji-xiang-ying/">
                                <h3 class="post-title">
                                    应急响应
                                </h3>
                            </a>
                        </div>
                        
                            <div id="disqus_thread"></div>
                            <div id="gitalk-container"></div>
                </div>
                <!-- middle -->
                <div class="main-container-middle"></div>
                <!-- right -->
                <div id="sidebar" class="main-container-right">
                    
                        <!-- toc -->
                        
    <div class="toc-card i-card ">
        <div class="toc-title i-card-title">目录</div>
        <div class="toc-content">
            <ul class="markdownIt-TOC">
<li>
<ul>
<li>
<ul>
<li><a href="#%E5%89%8D%E8%A8%80">前言</a></li>
<li><a href="#%E5%89%8D%E6%9C%9F%E5%87%86%E5%A4%87">前期准备</a></li>
<li><a href="#%E7%94%B3%E8%AF%B7%E4%BB%93%E5%BA%93">申请仓库</a></li>
<li><a href="#%E7%94%B3%E8%AF%B7token">申请Token</a></li>
<li><a href="#%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83">配置环境</a></li>
<li><a href="#%E5%B0%8F%E7%BB%93">小结</a></li>
</ul>
</li>
</ul>
</li>
</ul>

        </div>
        <script>
            function locateCatelogList() {
                /*获取文章目录集合,可通过:header过滤器*/
                var alis = $('.post-content :header');
                /*获取侧边栏目录列表集合**/
                var sidebar_alis = $('.markdownIt-TOC a');
                /*获取滚动条到顶部的距离*/
                var scroll_height = $(window).scrollTop();
                for (var i = 0; i < alis.length; i++) {
                    /*获取锚点集合中的元素分别到顶点的距离*/
                    var a_height = $(alis[i]).offset().top;
                    if (a_height < scroll_height) {
                        /*高亮显示*/
                        sidebar_alis.removeClass('on');
                        $(sidebar_alis[i]).addClass('on');
                    }
                }
            }
            $(function() {
                /*绑定滚动事件 */
                $(window).bind('scroll', locateCatelogList);
            });
        </script>
    </div>
    
                            

                </div>




            </div>


            <div class="site-footer">
  Powered by <a href="https://mianbao-niunai.gitee.io"_blank">Gridea</a> | 
  <a class="rss" href="https://mianbao-niunai.gitee.io/mianbao-niunai/atom.xml" target="_blank">RSS</a>
</div>

<script>
  hljs.initHighlightingOnLoad()
</script>


    </div>
    <script>
        $('#sidebar').stickySidebar({
            topSpacing: 80,
            // bottomSpacing: 60
        });
    </script>
    
</body>

</html>